# 客户端案例列表页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

客户在了解服务内容和价格时，需要能够浏览不同类型的服务案例，以便参考类似需求的处理方案和报价信息。目前客户无法便捷地查看和筛选服务案例，缺乏一个统一的案例展示页面。客户需要一个专门的案例列表页面，能够按服务类型筛选浏览案例，了解不同案例的价格、服务类型、交付周期等信息，帮助客户做出决策。



需求价值（补充对业务的价值）：

1. **提升案例展示效率**：通过专门的案例列表页面，集中展示所有服务案例，客户可以快速浏览和筛选，提高案例查看效率。
2. **增强客户决策能力**：通过展示案例的价格、服务类型、交付周期等关键信息，帮助客户了解服务内容和价格范围，促进需求转化为订单。
3. **优化用户体验**：通过服务类型标签筛选功能，让客户能够快速找到感兴趣的服务案例，减少查找时间，提升用户体验。
4. **促进业务转化**：通过案例展示，让客户了解服务的专业性和成功案例，增强客户信任，促进业务转化。



需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供案例浏览入口**：作为案例模块的主入口页面，集中展示所有服务案例，让客户能够便捷地浏览和查看案例信息。
2. **支持服务类型筛选**：通过热门服务类型标签栏，支持客户按服务类型筛选案例，快速找到感兴趣的服务案例。
3. **展示案例关键信息**：在案例卡片中展示价格、服务类型、交付周期、描述等关键信息，帮助客户快速了解案例内容。
4. **提供案例详情入口**：点击案例卡片可以跳转到案例详情页，查看更详细的案例信息。
5. **提升页面可用性**：通过清晰的布局、流畅的交互和友好的视觉设计，提升页面的可用性和用户体验。



用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 能够浏览所有服务案例，了解不同服务类型和价格范围，帮助我做出决策。
- 能够通过服务类型标签快速筛选案例，找到我感兴趣的服务类型，节省查找时间。
- 能够在案例卡片中看到价格、服务类型、交付周期等关键信息，快速了解案例内容。
- 能够点击案例卡片查看详细案例信息，了解案例的具体内容和处理方案。
- 能够通过底部导航栏快速切换到其他功能页面。

**作为产品经理，我希望：**
- 案例列表页能够引导客户浏览案例，提升客户对服务的认知和信任。
- 通过案例展示，让客户了解服务的专业性和成功案例，促进业务转化。
- 通过服务类型筛选功能，提升客户查找案例的效率，优化用户体验。



需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 页面采用垂直滚动布局，包含以下模块（从上到下）：
  - 导航栏（固定顶部）
  - 热门服务类型标签栏
  - 服务案例网格（2列布局）
  - 底部导航栏（固定底部）

**2. 导航栏**
- 显示"服务案例"标题
- 左侧显示返回按钮，点击返回上一页
- 右侧预留空白区域保持布局平衡

**3. 热门服务类型标签栏**
- **布局**：横向滚动容器，支持左右滑动，隐藏滚动条
- **标签选项**：
  - 全部（默认选中）
  - 企业服务
  - 管理咨询
  - AI+RPA
  - 流程自动化
  - 数字化转型
- **标签样式**：
  - 选中状态：蓝紫色背景（#6366f1），白色文字
  - 未选中状态：浅灰色背景（#f3f4f6），灰色文字（#6b7280），带边框
  - 圆角样式，内边距8px 20px
- **交互行为**：
  - 点击标签切换选中状态，其他标签取消选中
  - 标签切换后自动筛选下方案例展示
  - 标签切换有过渡动画效果

**4. 服务案例网格**
- **布局**：2列网格布局，列间距12px
- **案例卡片内容**：
  - 案例图片/图标（高度140px，带遮罩层）
  - 价格（粗体，灰色文字）
  - 服务信息：服务类型、交付周期（小字，灰色文字，用"·"分隔）
  - 描述文字（小字，灰色文字，最多显示2行，超出部分显示省略号）
- **卡片样式**：
  - 白色背景，圆角12px
  - 带阴影效果
  - 点击时有缩放动画效果（scale 0.98）
- **交互行为**：
  - 点击案例卡片跳转到案例详情页，并传递案例ID参数
  - 根据选中的服务类型标签筛选展示对应案例
  - 无案例时显示空状态提示

**5. 底部导航栏**
- 固定底部显示，支持安全区域适配
- 导航项：首页、需求、案例（当前选中）、我的
- 当前页面（案例）高亮显示：图标和文字使用蓝紫色（#6366f1）
- 点击导航项跳转到对应页面

**6. 筛选逻辑**
- **全部标签**：显示所有案例
- **企业服务标签**：只显示服务类型为"企业服务"的案例
- **管理咨询标签**：只显示服务类型为"管理咨询"的案例
- **AI+RPA标签**：只显示服务类型为"AI+RPA"或"RPA自动化"的案例
- **流程自动化标签**：只显示服务类型为"流程自动化"的案例
- **数字化转型标签**：只显示服务类型为"数字化转型"的案例

**7. 数据来源**
- 服务案例：从案例表（cases）或需求表（requirements）获取所有案例数据
- 案例字段包括：案例ID、案例图片/图标、价格、服务类型、交付周期、描述文字
- 案例数据按创建时间倒序排列

**8. 交互行为**
- **页面加载**：进入页面时自动加载所有案例数据，显示加载状态
- **标签切换**：点击标签后立即筛选案例，无需等待加载
- **空状态处理**：筛选后无案例时显示"暂无案例"提示
- **滚动行为**：页面支持垂直滚动，标签栏支持横向滚动

**9. 性能优化**
- 案例图片使用懒加载，提升页面加载速度
- 标签切换时使用前端筛选，无需重新请求接口



验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 导航栏固定顶部显示，"服务案例"标题居中，返回按钮在左侧
- [ ] 热门服务类型标签栏正确显示，支持横向滚动
- [ ] 服务案例网格2列布局正确，列间距12px
- [ ] 底部导航栏固定底部，4个导航项正确显示，当前页面（案例）高亮显示

**2. 热门服务类型标签栏验收**
- [ ] 标签栏支持横向滚动，滚动条隐藏
- [ ] 默认"全部"标签选中，样式正确（蓝紫色背景，白色文字）
- [ ] 未选中标签样式正确（浅灰色背景，灰色文字，带边框）
- [ ] 点击标签切换选中状态正常，有过渡动画效果
- [ ] 标签切换后正确筛选下方案例展示

**3. 服务案例网格验收**
- [ ] 案例卡片2列网格布局正确
- [ ] 案例卡片内容完整：图片/图标、价格、服务信息、描述文字
- [ ] 案例图片高度140px，带遮罩层
- [ ] 价格、服务信息、描述文字样式正确
- [ ] 描述文字最多显示2行，超出部分显示省略号
- [ ] 点击案例卡片正确跳转到案例详情页，并传递案例ID参数
- [ ] 点击时有缩放动画效果

**4. 筛选功能验收**
- [ ] 点击"全部"标签显示所有案例
- [ ] 点击"企业服务"标签只显示企业服务案例
- [ ] 点击"管理咨询"标签只显示管理咨询案例
- [ ] 点击"AI+RPA"标签只显示AI+RPA相关案例
- [ ] 点击"流程自动化"标签只显示流程自动化案例
- [ ] 点击"数字化转型"标签只显示数字化转型案例
- [ ] 筛选后无案例时正确显示空状态提示

**5. 底部导航栏验收**
- [ ] 底部导航栏固定底部显示，支持安全区域适配
- [ ] 4个导航项正确显示：首页、需求、案例、我的
- [ ] 当前页面（案例）高亮显示：图标和文字使用蓝紫色
- [ ] 点击导航项正确跳转到对应页面

**6. 交互行为验收**
- [ ] 页面加载时显示加载状态，数据加载完成后正确显示内容
- [ ] 标签切换时立即筛选案例，无需等待加载
- [ ] 支持下拉刷新，刷新后数据正确更新
- [ ] 加载失败时显示错误提示，点击重试按钮能够重新加载
- [ ] 无数据时正确显示空状态提示

**7. 数据准确性验收**
- [ ] 案例数据从数据库正确获取，显示的案例信息准确
- [ ] 筛选逻辑正确，筛选后的案例符合选中的服务类型
- [ ] 案例数据按创建时间倒序排列

**8. 性能验收**
- [ ] 案例图片使用懒加载，页面加载速度正常
- [ ] 标签切换时使用前端筛选，响应速度快，无卡顿